<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        #left {
            width: 50px;
            height: 260px;
            background: brown;
            position: fixed;
            bottom: 300px;
            left: 50px;
            color: #fff;
            box-sizing: border-box;
            display: none;
        }

        #left div {
            padding: 8px;
            margin: 10px 0;
            cursor: pointer;
             /* word-break: break-all;让英文和数字换行 */
            /* white-space: nowrap;中文不还行 */

        }

        #left div:hover {
            background: orangered;
        }

        #left div.active {
            background: orangered;
        }
    </style>
</head>

<body>
    <div id="left">
        <div>
            家用电器
        </div>
        <div>
            数码影音
        </div>
        <div>
            服装百货
        </div>
        <div>TOP</div>
    </div>
    <div style="height:1200px;background:#eee">

    </div>
    <div id="container">
        <div style="height:600px;background:pink"></div>
        <div style="height:700px;background:rgb(0, 255, 98)"></div>
        <div style="height:500px;background:rgb(25, 0, 255)"></div>
    </div>
    <div style="height:500px;background:#eee"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    $("#left div:eq(3)").click(function(){
        $("html,body").animate({
            "scrollTop":0
        },200)
    })
    $("#left div:lt(3)").click(function () {
            // $(this).html("SIMBA")
            // console.log($(this).html()) // innerHTML
            var top = $("#container div").eq($(this).index()).offset().top
            // $(window).scrollTop(top)

            //固定写法，设置滚动条高度
            $("html,body").animate({
                "scrollTop": top
            }, 200)
        })

     $(window).scroll(function () {
            if ($("#container").offset().top - $(window).scrollTop() <= 100) {
                $("#left").show()
                $("#container div").each(function (i, item) {
                    if ($(this).offset().top - $(window).scrollTop() <= 100) {
                        $("#left div").eq(i).addClass("active").siblings(".active")
                            .removeClass("active")
                    }
                })
            } else {
                $("#left").hide()
            }
        })





    // var container = document.getElementById("container")
    // var left = document.getElementById("left")
    // var divs = container.children
    // window.onscroll = () => {
    //     if (container.offsetTop - document.documentElement.scrollTop <= 100) {
    //         left.style.display = "block"
    //         for (let i = 0; i < divs.length; i++) {
    //             if (divs[i].offsetTop - document.documentElement.scrollTop <= 100) {
    //                 var active = left.getElementsByClassName("active")[0]
    //                 if (active) active.classList.remove("active")
    //                 left.children[i].classList.add("active")
    //             }

    //         }
    //     } else {
    //         left.style.display = "none"
    //     }
    // }





</script>

</html>